<template>
  <el-container>
    <div class="right-panel">
      <div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
        <div class="panel-search-box" style="width: 200px">
          <span class="demonstration" style="margin-left: 10px">片区:</span>
          <el-select v-model="search.area" placeholder="全国" style="width: 150px" filterable clearable
            @change="areaChange">
            <el-option v-for="item in areaList" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="panel-search-box" style="width: 260px">
          <span class="demonstration" style="margin-left: 10px">品种:</span>
          <el-select v-model="search.productSpec" placeholder="全部" style="width: 210px" filterable clearable
            @change="specChange">
            <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </div>
        <div class="panel-search-box">
          <span class="demonstration" style="margin: 0 10px">计划月份:</span>
          <el-date-picker v-model="planCode" type="month" style="width: 150px" @change="dateChange"></el-date-picker>
        </div>
        <div class="panel-search-box">
          <el-button type="primary" style="width: 100px; margin-left: 10px" @click="upsearch">查询</el-button>
          <el-button type="primary" style="width: 100px;margin-left: 10px" @click="exportDetail">导出</el-button>
          <!-- <el-button type="primary" style="margin-left: 10px" @click="toProgressStatistics">进度统计</el-button> -->
          <br />

          <!-- 问号图标 -->
          <!-- <el-popover placement="top-start" :width="200" trigger="hover">
            <p>1、计划配额(万)</p>
            <p>2、实际发货(万)</p>
            <p>3、剩余配额(万)</p>
            <p>4、预计纯销(万)</p>
            <p>5、实际纯销(万)</p>
            <p>6、纯销差值(万)</p>
            <p>7、实际库存(万)</p>
            <p>8、库存周转</p>
            <template #reference>
              <el-icon color="#f5a21d" style="margin-left: 100px; vertical-align: middle; font-size: 24px">
                <QuestionFilled />
              </el-icon>
            </template>
</el-popover> -->
        </div>
      </div>
      <div class="search-box">
        <div class="panel-search-box" style="margin-bottom: 10px">
          <scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出" hideButton>
          </scFileExport>
        </div>
      </div>
    </div>
    <el-header style="display: none"></el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" :params="params" border :cell-style="cellStyle" stripe remoteSort remoteFilter
        @selection-change="selectionChange">
        <el-table-column label="品种" prop="productSpec" align="center"></el-table-column>
        <el-table-column label="区域" prop="area" align="center"></el-table-column>
        <el-table-column label="计划配额（万）" prop="planNextQuota" align="center"></el-table-column>

        <el-table-column :label="'实际发货（万）\r\n' + queryDate.saleDate" prop="stockOut" align="center">
        </el-table-column>
        <el-table-column label="剩余配额（万）" prop="residualQuota" align="center"></el-table-column>
        <el-table-column label="预计纯销（万）" prop="planNextSale" align="center"></el-table-column>
        <el-table-column :label="'直连纯销（万）\r\n' + queryDate.pureSaleDate" prop="sale" align="center"></el-table-column>
        <el-table-column label="纯销差值（万）" prop="saleDifference" align="center"></el-table-column>
        <el-table-column :label="'直连库存（万）\r\n' + queryDate.stockDate" prop="stock" align="center"></el-table-column>
        <el-table-column label="理论库存（万）" prop="expectedStock" align="center"></el-table-column>
        <el-table-column label="库存差值（万）" prop="stockDifference" align="center"></el-table-column>
        <el-table-column label="库存周转" prop="turnoverString" align="center"></el-table-column>

      </scTable>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'pogressQuery',
  data() {
    return {
      dialog: {
        info: false
      },
      areaList: [], //片区列表
      productSpecList: [], //品种列表
      search: {
        area: '', //片区
        productSpec: '', //品种
        month: null //月份
      },
      apiObj: this.$API.plan.progressList,
      params: {
        // area:'上海片区',//片区
        // productSpec:'补脾15袋',//品种
        month: null //月份
      },
      planCode: '', //计划年月
      deriveExcel: this.$API.plan.download,
      queryDate: '' //进度查询日期
    }
  },
  created() {
    this.params.month = this.search.month = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))
    this.planCode = String(this.search.month)
    this.getArea()
    this.getProductSpec()
    this.otcScheduleTime()
  },
  methods: {
    // 进度查询日期
    async otcScheduleTime() {
      let res = await this.$API.plan.otcScheduleTime.get()
      console.log('2222222', res.data)
      this.queryDate = res.data
    },
    areaChange(value) {
      if (!value) {
        this.search.area = ''
        this.upsearch()
      } else {
        let obj = this.areaList.find((item) => item.id === value)
        this.search.area = obj.label
      }
    },
    specChange(value) {
      if (!value) {
        this.search.productSpec = ''
        this.upsearch()
      }
    },
    //获取片区列表
    async getArea() {
      let res = await this.$API.plan.areas.get()
      res.data[0].children.forEach((item) => {
        if (item.children.length > 0) {
          this.areaList.push(...item.children)
        } else {
          this.areaList.push(item)
        }
      })
    },
    //获取品种列表
    async getProductSpec() {
      let res = await this.$API.plan.productList.get()
      this.productSpecList = res.data
    },
    //导出
    exportDetail() {
      this.$refs.scFileExport.open()
    },
    //进度统计
    toProgressStatistics() {
      this.$router.replace('./progressStatistics')
    },
    // 导入成功后
    handleImportSuccess(res, close) {
      // console.log(res.data)
      let flag = this.checkImportStatus(res.data)
      if (flag) {
        if (res.code === '0') {
          // this.$alert('', '导入成功', {
          // 	type: 'success',
          // 	showClose: false,
          // 	center: true
          // })
          // if (resImport.code === '0') {
          // 	this.$TOOL.data.remove('importExcel')
          // }
          this.importExcelTask(res, close)
        }
      } else {
        this.$confirm(`已存在该导入任务,确定重新导入吗？`, '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading()
            this.removeImportTask(res.data)
            this.importExcelTask(res)
            loading.close()
            // this.$message.success("操作成功")
          })
          .catch(() => { })
      }
    },
    dateChange(e) {
      if (!this.planCode) {
        this.search.month = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))
        this.planCode = String(this.search.month)
      } else {
        this.planCode = this.$TOOL.dateFormat(this.planCode, 'yyyyMM')
      }
    },
    //查询
    upsearch() {
      this.search.month = Number(this.planCode)
      this.$refs.table.upData(this.search)
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 状态列字体颜色
      if (row.saleDifference < 0 && columnIndex === 7) {
        return { color: 'red' } //方法1
      }
    }
  }
}
</script>

<style>
.header-btn-item {
  display: flex;
}

.el-table .cell {
  white-space: pre-line !important;
}
</style>
